<template>
  <div v-if="data">
    <order-header />
    <!-- 订单提交成功 -->
    <!-- {{codeid}} -->
    <!-- {{price}} -->
    <div class="order_time">
      <img src="/image/time.png" alt="">
      <span>{{ this.showTime }},逾期订单提交将失效</span>
    </div>
    <div class="order_success">
      <!-- 第一部分 -->
      <div class="order_sec_top">
        <img src="/image/step3_icon.png" alt="" />
        <span>订单提交成功!</span>
        <p>
          <i>取车时请务必携带</i
          >本人信用卡，本人二代有效身份证，本人有效地方驾驶证副本
        </p>
      </div>
      <!-- 第二部分 -->
      <div class="order_sec_body">
        <ul>
          <li><span>订单号:</span>{{ this.data.order_code_id }}</li>
          <li>
            <span>支付方式:在线支付</span>
          </li>
          <li>
            <span>
              订单总价:
              <i>￥{{ this.data.order_price }}</i>
            </span>
          </li>
          <li>
            <span>
              <em>*</em>
              <span>已支付:￥0.00</span>
              <span
                >未支付:
                <i>￥{{ this.data.order_price}}</i>
              </span>
            </span>
          </li>
        </ul>
      </div>
      <!-- 第三部分 -->
      <div class="order_sec_last">
        <button @click="goPay(orderID)">继续支付</button>
        <a href="javascript:;" @click="goIndex()">返回首页</a>
        <a href="javascript:;">查看订单</a>
      </div>
    </div>
  </div>
</template>

<script>
import OrderHeader from "../components/OrderHeader.vue";
import { mapMutations, mapState } from "vuex";
export default {
  components: { OrderHeader },
  props: ["orderID", "price"],
  data() {
    return {
      time: null,
      showTime: "",
      data:null,
    };
  },
  methods: {
    // 获取订单信息
    getorderdata(id){
      this.axios.get(`/order/getorderdata?id=${id}`)
      .then(res => {
        // console.log(res.data)
        this.data=res.data.data
      })
    },
    goPay(id){
      this.axios.get(`/order/ordersuc?id=${id}`)
      .then(res => {
        // console.log(res)
        if(res.data.code==200){
          this.$router.push('/paysuc')
        }
      })
    },
    goIndex(){
      this.$router.push('/mydetail')
    },
    // ...mapMutations(["setData"]),
    CountTime() {
      let start = this.moment(new Date());
      let end = this.moment().add(15, "m");
      // console.log("start:"+start,"end:"+end);
      // console.log("end"+end);
      let diff = end.diff(start);
      this.time = Math.floor(diff / 1000);
      // console.log(this.time);
      setInterval(() => {
        if (this.time > 0) {
          this.time--;
          // this.setData(this.time);
          // console.log(this.time + "秒");
          let minux = this.time * 1000;
          // console.log(this.moment(minux).format("m分 s秒"));
          this.showTime = this.moment(minux).format("m分 s秒");
        } else {
          clearInterval;
        }
      }, 1000);
    },
  },
  mounted() {
    this.CountTime();
    this.getorderdata(this.orderID)
    // console.log(this.shijian);
  },
};
</script>
<style src="../assets/css/ordersuccess.css" scoped></style>
<style lang="scss" scoped></style>
